<template>
  <div class="search_page">
    <van-sticky>
      <!-- 顶部搜索 开始 -->
      <div class="top_search">
        <div class="icon" @click="goBack">
          <img src="@/assets/images/arrow_left.png" class="left_arrow" alt="" />
        </div>
        <div class="search_box">
          <van-search
            v-model="term"
            placeholder="请输入搜索关键词"
            shape="round"
            autofocus
            @search="onSearch"
          />
        </div>
      </div>
      <!-- 顶部搜索 end -->

      <!-- 菜单 开始 -->
      <div class="menus_box">
        <van-tabs
          v-model="menuActive"
          :color="tabsColor"
          :title-active-color="tabsColor"
          @click="menuEvent"
        >
          <van-tab
            v-for="(item, index) in menus"
            :key="index"
            :title="item.name"
          ></van-tab>
        </van-tabs>
      </div>
      <!-- 菜单 end -->
    </van-sticky>

    <!-- 内容区域 开始 -->
    <div class="content">
      <!-- 医院列表 开始 -->
      <div class="list_box" v-if="menuActive == 0">
        <template v-if="hospitalList && hospitalList.length">
          <hospital
            v-for="(item, index) in hospitalList"
            :key="`hospital_${index}`"
            :info="item"
          ></hospital>
        </template>
        <no-data v-else></no-data>
      </div>
      <!-- 医院列表 end -->

      <!-- 医生列表 开始 -->
      <div class="list_box" v-if="menuActive == 1">
        <template v-if="doctorList && doctorList.length">
          <doctor
            v-for="(item, index) in doctorList"
            :key="`doctor_${index}`"
            :info="item"
          ></doctor>
        </template>
        <no-data v-else></no-data>
      </div>
      <!-- 医生列表 end -->

      <!-- 商品 开始 -->
      <div class="list_box goods_list" v-if="menuActive == 2">
        <template v-if="goodsList && goodsList.length">
          <goods
            v-for="(item, index) in goodsList"
            :key="`goods_${index}`"
            :info="item"
          ></goods>
        </template>
        <no-data v-else></no-data>
      </div>
      <!-- 商品 end -->

      <!-- 资讯 开始 -->
      <div class="list_box news_list" v-if="menuActive == 3">
        <template v-if="newsList && newsList.length">
          <SearchNews
            v-for="(item, index) in newsList"
            :key="`news_${index}`"
            :info="item"
          ></SearchNews>
        </template>
        <no-data v-else></no-data>
      </div>
      <!-- 商品 end -->

      <!-- 社区问答 开始 -->
      <div class="list_box" v-if="menuActive == 4">
        <template v-if="answerList && answerList.length">
          <question
            v-for="(item, index) in answerList"
            :key="`question_${index}`"
            :info="item"
          ></question>
        </template>
        <no-data v-else></no-data>
      </div>
      <!-- 社区问答 end -->

      <!-- 案例 开始 -->
      <div class="list_box case_list" v-if="menuActive == 5">
        <template v-if="caseList && caseList.length">
          <div class="left">
            <UserCase
              v-for="(item, index) in caseLeftList"
              :key="`l_${index}`"
              :info="item"
            ></UserCase>
          </div>
          <div class="right">
            <UserCase
              v-for="(item, index) in caseRightList"
              :key="`r_${index}`"
              :info="item"
            ></UserCase>
          </div>
        </template>
        <no-data v-else></no-data>
      </div>
      <!-- 案例 end -->
    </div>
    <!-- 内容区域 end -->
  </div>
</template>
<script>
import { Search, Tab, Tabs, Sticky } from "vant";
import Hospital from "@/components/hospital/index.vue";
import Doctor from "@/components/doctor/index.vue";
import Goods from "@/components/goods/index.vue";
import Question from "@/components/question/index.vue";
import SearchNews from "@/components/news/index.vue";
import UserCase from "@/components/case/index.vue";
import {
  PLATFORM_TYPE,
  GET_HOSPITAL_SEARCH,
  GET_DOCTOR_SEARCH,
  GET_GOODS_SEARCH,
  GET_QUESTIONANSWER_SEARCH,
  GET_ARTICLE_SEARCH,
  GET_ORALCAVITYCASE_SEARCH,
} from "@/http/interface";
export default {
  components: {
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Sticky.name]: Sticky,
    Hospital,
    Doctor,
    Goods,
    Question,
    SearchNews,
    UserCase,
  },
  data() {
    return {
      tabsColor: "#3388FF",
      term: "",
      menus: [
        { name: "医院", id: 0, target: "hospital" },
        { name: "医生", id: 1, target: "doctor" },
        { name: "商品", id: 2, target: "goods" },
        { name: "资讯", id: 3, target: "news" },
        { name: "问答", id: 4, target: "answer" },
        { name: "案例", id: 5, target: "case" },
      ],
      menuActive: 0,
      hospitalList: [],
      doctorList: [],
      goodsList: [],
      newsList: [],
      caseList: [],
      answerList: [],
      caseLeftList: [],
      caseRightList: [],
    };
  },
  head() {
    return {
      link: [{ ref: "canonical", href: `${this.$domain}/search` }],
    };
  },
  watch: {
    hospitalList: {
      handler: function (n) {
        this.hospitalList = n;
      },
      immediate: true,
    },
    doctorList: {
      handler: function (n) {
        this.doctorList = n;
      },
      immediate: true,
    },
    goodsList: {
      handler: function (n) {
        this.goodsList = n;
      },
      immediate: true,
    },
    newsList: {
      handler: function (n) {
        this.newsList = n;
      },
      immediate: true,
    },
    caseList: {
      handler: function (n) {
        this.caseList = n;
      },
      immediate: true,
    },
    answerList: {
      handler: function (n) {
        this.answerList = n;
      },
      immediate: true,
    },
  },
  watchQuery: true,
  async asyncData({ query, $axios, $cookies }) {
    let city = $cookies.get("city");
    let params = { pageNumber: 1, pageSize: 10000, term: query.term };
    let hospitalList = [];
    let doctorList = [];
    let goodsList = [];
    let newsList = [];
    let caseList = [];
    let answerList = [];
    let menuActive = Number(query.type || 0);
    let caseLeftList = [];
    let caseRightList = [];

    if (city && city != "全国") {
      params.city = city;
    }

    // 医院
    if (menuActive == 0) {
      let h = await $axios.get(GET_HOSPITAL_SEARCH, { params: params });
      let hobj = h.data || {};
      hospitalList = hobj.list || [];
    }

    // 医生
    if (menuActive == 1) {
      let d = await $axios.get(GET_DOCTOR_SEARCH, { params: params });
      let dobj = d.data || {};
      doctorList = dobj.list || [];
    }

    // 商品
    if (menuActive == 2) {
      let g = await $axios.get(GET_GOODS_SEARCH, { params: params });
      let gobj = g.data || {};
      goodsList = gobj.list || [];
    }

    // 资讯
    if (menuActive == 3) {
      let n = await $axios.get(GET_ARTICLE_SEARCH, { params: params });
      let nobj = n.data || {};
      newsList = nobj.list || [];
    }

    // 问答
    if (menuActive == 4) {
      let a = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: params });
      let aobj = a.data || {};
      answerList = aobj.list || [];
    }

    // 案例
    if (menuActive == 5) {
      let c = await $axios.get(GET_ORALCAVITYCASE_SEARCH, { params: params });
      let cobj = c.data || {};
      caseList = cobj.list || [];
      caseList.map((k, i) => {
        if (i % 2 == 0) {
          caseLeftList.push(k);
        } else {
          caseRightList.push(k);
        }
      });
    }

    return {
      hospitalList,
      doctorList,
      goodsList,
      answerList,
      newsList,
      caseList,
      menuActive,
      term: query.term,
      caseLeftList,
      caseRightList,
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },

    // tabs点击事件
    menuEvent(row) {
      let term = this.term;
      this.menuActive = row;
      this.$router.replace({
        path: "/search",
        query: { type: row, term: term },
      });
    },

    // 搜索
    onSearch(e) {
      let term = e;
      let menuActive = this.menuActive;
      this.$router.replace({
        path: "/search",
        query: { type: menuActive, term: term },
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/search/index.less";
</style>